<template>
  <div id="home" class="home">
    <!-- 搜索框 -->
    <van-search v-model="value" input-align="center" placeholder="商品搜索 发现好物" />

    <!-- 轮播图 -->
    <van-swipe :autoplay="3000"  :height="200" indicator-color="#fff">
      <van-swipe-item v-for="(image, index) in images" :key="index">
        <img class="swiperimg" v-lazy="image.image_url" />
      </van-swipe-item>
    </van-swipe>

    <!-- 五宫格 -->
    <van-grid :column-num="5">
      <van-grid-item v-for="(item, index) in channel" :key="index" :icon="item.icon_url" :text="item.name" />
    </van-grid>

    <!-- 产品制造商 -->
    <div class="brandList">
      <!-- 标题 -->
      <van-row class="title">
        <van-col span="24">产品制造商</van-col>
      </van-row>
      <!-- 内容 -->
      <van-grid :border="false" :column-num="2">
      <van-grid-item class="maker" v-for="(item1, index1) in brandList" :key="index1">
        <van-image lazy-load :src="item1.new_pic_url" />
        <h4 class="maker_title">{{item1.name}}</h4>
        <p class="maker_price">{{item1.floor_price}}元起</p>
      </van-grid-item>
    </van-grid>
    </div>

    <!-- 新品发售 -->
    <div class="newGoodsList">
      <!-- 标题 -->
      <van-row class="title">
        <van-col span="24">周二周四 新品发售</van-col>
      </van-row>
      <!-- 内容 -->
      <van-grid :border="false" :column-num="2">
      <van-grid-item class="newGoods" v-for="(newGood, index2) in newGoodsList" :key="index2">
        <van-image lazy-load :src="newGood.list_pic_url" />
        <h4 class="good_title van-ellipsis">{{newGood.name}}</h4>
        <p class="good_price">￥{{newGood.retail_price}}</p>
      </van-grid-item>
    </van-grid>
    </div>

    <!-- 人气推荐 -->
    <div class="hotGoodsList">
      <!-- 标题 -->
      <van-row class="title">
        <van-col span="24">人气推荐</van-col>
      </van-row>
      <!-- 分割线 -->
      <van-divider :style="{borderColor: '#9c9c9c', padding: '0'}"></van-divider>
      <!-- 内容 -->
      <van-card class="hotGoods" v-for="(hotGood, index2) in hotGoodsList" :key="index2"      
        :price="hotGood.retail_price"
        :desc="hotGood.goods_brief"
        :title="hotGood.name"
        :thumb="hotGood.list_pic_url"
      />  
    </div>
    <tab-btn></tab-btn>
    
  </div>
</template>

<script>
// @ is an alias to /src
import axios from 'axios'
// 导入api获取数据
import api from '../assets/config/api'
import Vue from 'vue'
import { Lazyload } from 'vant'
Vue.use(Lazyload)
import tabBtn from '../components/tabBtn'

export default {
  name: 'Home',
  data() {
    return {
      value: '',
      data: {},
      tabActive: 0,
    }
  },
  components: {
    tabBtn
  },
  computed: {
    images() {
      if (this.data.data) {
        return this.data.data.banner
      } else {
        return []
      }
    },
    channel() {
      if (this.data.data) {
        return this.data.data.channel
      } else {
        return []
      }
    },
    brandList() {
      if (this.data.data) {
        return this.data.data.brandList
      } else {
        return []
      }
    },
    newGoodsList() {
      if (this.data.data) {
        return this.data.data.newGoodsList
      } else {
        return []
      }
    },
    hotGoodsList() {
      if (this.data.data) {
        return this.data.data.hotGoodsList
      } else {
        return []
      }
    },
  },
 async mounted(){
    // console.log(api)
    let res = await axios.get(api.IndexUrl)
    this.data = res.data 
  }
}
</script>

<style lang="less" scoped>
  #home{
    .swiperimg{
      width: 100%;
      height: 200px;
    }
    .brandList{
      /deep/.van-grid-item__content{
        padding: 0;
        position: relative;
      }
      .title{
        margin: 10px 0;
        text-align: center;
      }
      .maker{
        position: relative;
        border: 1px solid #fff;
        .maker_title{
          position: absolute;
          left: 10px;
          top: -5px;
        }
        .maker_price{
          position: absolute;
          left: 10px;
          top: 20px;
          font-size: 14px;
          color: #999;
        }
      }            
  }
  .newGoodsList{
    position: relative;
    /deep/.van-grid-item__content{
      padding:16px 8px 50px;
    }
    .title{
      text-align: center;
    }
    .good_title{
      position: absolute;
      bottom: 0;
    }
    .good_price{
      position: absolute;
      bottom: -10px;
      color: red;
    }
  }
  .hotGoodsList{
    .title{
      text-align: center;
    }
    .hotGoods{   
      border-bottom: 1px solid #e8e8e8;  
      .van-card__price-integer{
        color: red;
      }
      .van-card__content{
        text-align: left;
        justify-content: center;
      }
      .van-card__title{
        font-size: 14px;
        font-weight: 900;
        color: #333;
        padding: 5px 0;
      }
    }
  }

  }
</style>
